<template>
  <div class="columnInfo">
    <!--    栏目基本信息-->
    <div>
      <h3>栏目基本信息</h3>
      <div>
        <!--      左右两侧的表单-->
        <div  class="clear_float"  style="display: flex">
          <!--      左侧的内容-->
          <el-form :label-position="labelPosition" label-width="80px" :model="info" class="left" style="flex:1">
<!--            栏目ID-->
            <el-form-item label="栏目ID">
              <el-input v-model="info.columnId" style="width: 400px"></el-input>
            </el-form-item>
<!--            栏目名称-->
            <el-form-item label="栏目名称">
              <el-input v-model="info.columnName" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="所属分类">
              <el-cascader
                v-model="value"
                :options="options"
                :props="{ expandTrigger: 'hover',value:'sortId',children:'sortList',label:'sortName'}"
                placeholder="请选择栏目"
                style="margin-left: 60px;"
                :show-all-levels="false"
                :size="'medium'"
                @change="handleChange"
              >
              </el-cascader>
            </el-form-item>
<!--            栏目类型-->
            <el-form-item label="栏目类型">
              <el-input v-model="info.columnType" style="width: 400px"></el-input>
            </el-form-item>
<!--            授权信息-->
            <el-form-item label="授权信息">
              <el-input v-model="info.license" style="width: 400px"></el-input>
            </el-form-item>
<!--            发布者ID-->
            <el-form-item label="发布者ID">
              <el-input v-model="info.userId" style="width: 400px"></el-input>
            </el-form-item>
<!--            栏目官网-->
            <el-form-item label="栏目官网">
              <el-input v-model="info.columnWeb" style="width: 400px"></el-input>
            </el-form-item>
          </el-form>
          <!--      右侧内容-->
          <el-form :label-position="labelPosition" label-width="80px" :model="info" class="right"  style="flex:1">
<!--            栏目logo-->
            <el-form-item label="栏目logo">
              <div class="logo">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessLogo"
                >
                  <img v-if="info.columnLogo" :src="info.columnLogo" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-form-item>
<!--            栏目界面-->
            <el-form-item label="栏目界面">
                <div class="view">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessView"
                  >
                    <img v-if="info.showPic" :src="info.showPic" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </div>
            </el-form-item>
<!--            下载次数-->
            <el-form-item label="下载次数">
              <el-input v-model="info.downloads" style="width: 400px"></el-input>
            </el-form-item>
<!--            是否推荐-->
            <el-form-item label="是否推荐">
                <el-switch
                  v-model="info.recommend"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  >
                </el-switch>
            </el-form-item>
<!--            审核状态-->
            <el-form-item label="审核状态">
              <el-select  v-model="info.verify">
                <el-option
                  v-for="(item) in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <!--      官方介绍-->
        <div class="clear_float briefbox">
          <p class="left brief">官方介绍</p>
          <textarea name="" id="" class="briefInfo" v-model="info.briefIntro"></textarea>
        </div>
      </div>
    </div>
    <!--栏目基本介绍-->
    <div class="basicInfo">
      <p><b>栏目详细介绍</b></p>
      <el-tabs v-model="activeName" @tab-click="handleClick"  type="card">
        <el-tab-pane label="基本信息" name="first">
          <textarea name="" id="" class="briefInfo" v-model="info.briefIntro"></textarea>
        </el-tab-pane>
        <el-tab-pane label="主要功能" name="second">
          <textarea name="" id="" class="briefInfo" v-model="info.function"></textarea>
        </el-tab-pane>
        <el-tab-pane label="栏目特色" name="third">
          <textarea v-model="info.character"></textarea>
        </el-tab-pane>
        <el-tab-pane label="更新日志" name="fourth">
          <textarea name="" id="" class="briefInfo" v-model="info.updateLog"></textarea>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--    栏目评论-->
    <div class="comment">
      <p><b>栏目评论</b></p>
      <el-table
        :data="info.commentDtoList"
        border
        v-loading="dataListLoading"
        style="width: 100%;">
        <el-table-column
          prop="userId"
          header-align="center"
          align="center"
          label="发布者ID">
        </el-table-column>
        <el-table-column
          prop="time"
          header-align="center"
          align="center"
          label="发布时间">
        </el-table-column>
        <el-table-column
          prop="content"
          header-align="center"
          align="center"
          label="发布内容">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="200"
          label="审核状态">
          <template slot-scope="scope">
            <el-select v-model="scope.row.verify" @change="updateCommentStatus(scope.row)">
              <el-option
                v-for="(item) in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
  import vue from 'vue'
  import mavonEditor from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  vue.use(mavonEditor)

  export default {
    name: 'columnInfo',
    data() {
      return{
        value:'',
        // view:"",
        labelPosition: 'right',
        info: {
          //简要介绍
          briefIntro:'',
          //栏目特色
          character:'',
          //栏目ID
          columnId:"",
          //栏目名字
          columnName:"",
          //栏目类型
          columnType:"",
          //栏目官网
          columnWeb:'',
          //下载次数
          downloads:'',
          //主要功能
          function:'',
          //授权信息
          license:'',
          //是否推荐
          recommend:'',
          //界面展示
          showPic:'',
          //更新日志
          updateLog:'',
          //发布者id
          userId:'',
          //是否审核
          verify:'',
          //官方介绍
          webIntroduce:'',
          //评论
          commentDtoList:[
            {
              content:'',
              time:'',
              verify:''
            }
          ],
          //所选栏目序列号
          parentId:[],

        },
        options2: [{
          value: 0,
          label: '暂不审核'
        }, {
          value: 1,
          label: '通过'
        }, {
          value: 2,
          label: '不通过'
        }],
        activeName: 'first',
        options:[]
      }
    },
    created() {
      this.getColumnInfo();
    },
    methods:{
      //更新评论审核状态
      updateCommentStatus(data) {
        let{columnId,verify}=data;
        this.$http({
          url: this.$http.adornUrl('/generator/comment/update'),
          method:'post',
          data:this.$http.adornData({columnId,verify},false)
        }).then(({data}) => {
          this.$message({
            type: "success",
            message:"评论审核状态更新成功"
          })

        })
      },
      handleChange(value) {
        console.log(value);
      },
      //logo
      handleAvatarSuccessLogo(res, file) {
        this.logo = URL.createObjectURL(file.raw);
      },
      //界面
      handleAvatarSuccessView(res, file) {
        this.view = URL.createObjectURL(file.raw);
      },
      //tab切换
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //获取数据
      getColumnInfo() {
        this.$http({
          url: this.$http.adornUrl('/generator/column/detail'),
          method: 'post',
          data:{
            columnId:this.$route.query.columnId
          }
        }).then((res) => {
          this.info=res.data.columnDetailDto;
          this.options=this.info.platesList;
          this.info.parentId[0]=0;
          this.value=this.info.parentId;
          console.log(res);
        })
      }
    }
  }
</script>

<style>
</style>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .logo .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 70px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .view .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 250px;
    height: 106px;
    line-height: 106px;
    text-align: center;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
  }
  .columnInfo{
    padding-left: 100px;
  }
  .columnInfo textarea{
    border: 1px solid #d9d9d9;
    resize: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 25px;
  }
  .columnInfo textarea::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .briefbox{
    padding-left: 0.15rem;
  }

  .brief{
    color: #606266;
  }
  .briefInfo{
    width: 87%;
    height: 86px;
    margin-left:12px;
  }
  .basicInfo,.comment{
    margin-top: 30px;
  }
  .comment>p,.basicInfo>p{
    font-size: 16px;
    margin-bottom: 20px;
  }
  .comment ul>li{
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 20px;
  }
  .comment ul>li>p{
    margin-top: 20px;
  }
  .comment ul>li>p>span{
    margin-left: 20px;
  }
  .comment ul>li>p:nth-child(2){
    margin-top: 10px;
  }
  .comment ul>li:last-child{
    border-bottom:none;
  }
</style>
